.logistics {
  height: calc(100vh - 92px);
  box-sizing: border-box;
  padding: 12px;

  .main {
    box-sizing: border-box;
    padding: 12px;
    background-color: #fff;
    height: 100%;

    .statistics {
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 12px;

      ul {
        display: flex;
        column-gap: 36px;
        box-sizing: border-box;

        li {
          list-style: none;

          .title {
            font-size: 14px;
            text-align: center;
          }

          .num {
            font-size: 24px;
            color: #000;
            font-weight: bold;
            text-align: center;
          }
        }

        li.line {
          width: 1px;
          background: linear-gradient(#fff, #e5e5e5, #fff);
        }
      }
    }

    .divider_line {
      border-bottom: 1px dotted #e5e5e5;
      margin: 12px 0;
    }

    .body {
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 12px;
      height: calc(100% - 50px - 25px);
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .update {
          display: flex;
          flex-wrap: wrap;
        }

        .search {
          display: flex;
          column-gap: 5px;
          height: 28px;
          flex-wrap: wrap;

          :deep(.el-select) {
            height: 28px;
            width: 100px;
          }

          :deep(.el-input) {
            height: 28px;
            width: 100px;
          }

          .date-range {
            display: flex;
            align-items: center;
            gap: 5px;
            height: 28px;
            width: 260px;

            div {
              line-height: 10px;
            }
          }
        }
      }

      .table {
        max-height: calc(100% - 80px);
      }

      .footer {
        display: flex;
        justify-content: space-between;

        .pagination_container {
          display: flex;
          column-gap: 6px;
        }
      }
    }
  }
}

.info_list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  padding: 0 112px;

  .info_item {
    display: flex;
    column-gap: 5px;
    align-items: center;

    .value {
      display: flex;
      align-items: center;
      column-gap: 5px;
    }
  }
}
